<template>
  <page-wrap
    back
    hideSafeArea
    title="一览通"
    navLeft
    hideTab
    :dark="false"
    :showTop="true"
    txtColor="#ffffff"
    bgColor="transparent"
    ref="pageWrap"
  >
    <template>
      <view class="vip" :style="'padding-top:' + navHeight + 'px'">
        <scroll-view scroll-y class="scroll-view">
          <view
            class="box"
            v-for="(subItem, subIndex) in rightsData"
            :key="subIndex"
          >
            <image
              class="img-w"
              mode="widthFix"
              :src="subItem.rightsImg"
            ></image>
          </view>
        </scroll-view>
        <view class="buy" v-show="loaded">
          <image
            v-if="isVipNow"
            class="img-w btnImg"
            mode="widthFix"
            :src="alreadyVipImg"
            @click="handleFreeReceive()"
          />
          <image
            v-else
            class="img-w btnImg"
            mode="widthFix"
            :src="submitImg"
            @click="handleFreeReceive()"
          />
        </view>
      </view>
    </template>
    <u-modal
      v-model="endModalShow"
      :zoom="false"
      :show-cancel-button="false"
      @confirm="handleEndConfirm"
      content="活动已结束"
    ></u-modal>
  </page-wrap>
</template>

<script>
import { getPersonAllRights, openVersionRights } from '@/api/modules/vip';
import { getPersonBindCompanyStatus } from '@/api/modules/company';
import share from '@/mixins/share';
export default {
  mixins: [share],
  data() {
    return {
      personId: uni.getStorageSync('person-id').slice(2) || undefined,
      companyId: uni.getStorageSync('company-id'),
      topHeight: getApp().globalData.topHeight,
      navHeight: getApp().globalData.navHeight,
      personInfo: {},
      paying: false,
      loaded: false,
      endModalShow: false,
      sharePath: 'pages/activity/zhaduiActivity',
      shareTitle: '一览通',
      alreadyVipImg:
        'https://img3.job1001.com/ypMp/elan/images/ecenter/alreadyVip.png',
      imageUrl:
        'https://upload.yl1001.com/upload/images/view?file=b0cv2ODilbBcMdEqlasVAOtykEJJVcbhLRm1a6w/UQmjLp3a/QTyF/-5qxjia.png',
      submitImg:
        'https://upload.yl1001.com/upload/images/view?file=NCWcF-w_SZTqk8jKk8Rv/K=ZAmHsn9EkVZ=anG7g6_cXxtCS3eJzSzUc84bJr.png',
      rightsData: [
        {
          rightsImg:
            'https://upload.yl1001.com/upload/images/view?file=b0cv2ODilbBcMdEqlasVAOtykEJJVcbhLRm1a6w/UQmjLp3a/QTyF/-5qxjia.png',
          rightsName: 'banner'
        },
        {
          rightsImg: 'http://img3.job1001.com/ylt/notPay/level2/report-2x.png',
          rightsName: '报告库'
        },
        {
          rightsImg: 'http://img3.job1001.com/ylt/notPay/level2/case-2x.png',
          rightsName: '案例库'
        },
        {
          rightsImg:
            'https://upload.yl1001.com/upload/images/view?file=Fq=2A/Q2KP7=JDe5oOI4s4fqT0mzpMCLnA1Gn=4HuP6gIhPXDT0=Ka3rt3emE.png',
          rightsName: '活动说明'
        }
      ],
      isVipNow: false,
      isYpAccount: false
    };
  },
  created() {},
  mounted() {
    if (!!this.personId) {
      this.getPersonBindCompanyStatus();
    } else {
      this.loaded = true;
    }
  },
  onLoad(opt) {
    let enterOptions = uni.getEnterOptionsSync();
    if (
      enterOptions.scene == 1011 ||
      enterOptions.scene == 1012 ||
      enterOptions.scene == 1013
    ) {
      uni.setStorageSync('fromLoginStatus', 'company');
    }
  },
  methods: {
    handleEndConfirm() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    getData() {
      const params = {
        personId: this.personId
      };
      uni.showLoading();
      getPersonAllRights(params)
        .then((res) => {
          if (res.code == 200) {
            this.current = 0;
            this.personInfo = res.data.personInfo;
            this.setNavigationBar();
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none',
              duration: 2000
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
    setNavigationBar() {
      uni.setNavigationBarColor({
        frontColor: '#000',
        backgroundColor: ''
      });
    },
    // //管理分享
    // onShareTimeline() {
    //   return {
    //     title: "一览通",
    //     query: "uniqueCode=" + this.uniqueCode + "&" + this.shareQuery,
    //     imageUrl:
    //       "https://upload.yl1001.com/upload/images/view?file=b0cv2ODilbBcMdEqlasVAOtykEJJVcbhLRm1a6w/UQmjLp3a/QTyF/-5qxjia.png",
    //   };
    // },
    // 开通vip
    handleFreeReceive(level) {
      //先检查是否登录
      if (!!this.personId) {
        //先判断是否是老云聘账号（无法领取）还是已经是VIP的情况
        if (this.isYpAccount) {
          uni.showToast({
            title: '您已开通一览云聘会员，无法领取一览通体验会员',
            icon: 'none',
            duration: 2000
          });
          return;
        } else if (this.isVipNow) {
          getApp().globalData.tabBarList = getApp().globalData['companyTabs'];
          getApp().globalData.loginStatus = 'company';
          uni.setStorageSync('login-status', 'company');
          uni.reLaunch({
            url: '/pages/library/index',
            fail: (err) => {}
          });
          return;
        }
        //进入领取流程
        this.openVersionRights();
      } else {
        this.$refs.pageWrap.needLogin = true;
        this.$refs.pageWrap.handleLogin();
      }
      //设定按钮为不可按
      if (this.paying) return;
      this.paying = true;
    },
    getPersonBindCompanyStatus() {
      const params = {
        personId: this.personId
      };
      return getPersonBindCompanyStatus(params)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.type == 1) {
              this.isVipNow = true;
            } else if (res.data.type == 2) {
              this.isYpAccount = true;
            } else {
              if (res.data.noAccountSystemData.level == 0) {
                this.isVipNow = false;
              } else {
                this.isVipNow = true;
              }
            }
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none',
              duration: 2000
            });
          }
          this.paying = false;
          return res;
        })
        .finally(() => {
          this.loaded = true;
          this.setNavigationBar();
        });
    },
    openVersionRights() {
      const params = {
        personId: this.personId,
        companyId: this.companyId ? this.companyId : this.personId,
        rightsType: 'public',
        tradeVersionRightsId: 3, //2初级会员 3中级4 高级
        isExperience: true,
        isSystem: true
      };
      return openVersionRights(params)
        .then((res) => {
          if (res.code == 200) {
            uni.showModal({
              title: '提示',
              content:
                '您已成功领取一览通会员礼包，现在就去查看企业管理案例和职业研究报告吧！',
              confirmText: '查看案例',
              success: function (res) {
                if (res.confirm) {
                  getApp().globalData.tabBarList =
                    getApp().globalData['companyTabs'];
                  getApp().globalData.loginStatus = 'company';
                  uni.setStorageSync('login-status', 'company');
                  uni.reLaunch({
                    url: '/pages/library/index',
                    fail: (err) => {}
                  });
                } else if (res.cancel) {
                }
              }
            });
          } else {
            uni.showToast({
              title: res.status_desc,
              icon: 'none',
              duration: 2000
            });
          }
          return res;
        })
        .finally(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.vip {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-image: url($img-base + 'ecenter/my-vip-md.png');
  background-color: #1f003a;
  background-size: 100%;
  background-repeat: no-repeat;
  // padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  // padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

  .top {
    position: sticky;
    top: 0;
    z-index: 10;
    height: 412rpx;
    // background: url($img-base + 'ecenter/vip-m-top-bg.png');
    // background-size: 100%;
    overflow: hidden;

    .top-img {
      position: absolute;
      width: 690rpx;
      height: 278rpx;
      bottom: -60rpx;
      left: 32rpx;
    }

    .vip-icon {
      position: absolute;
      width: 332rpx;
      height: 276rpx;
      bottom: -60rpx;
      right: 0;
    }

    .gradient {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40rpx;
      background: linear-gradient(
        180deg,
        rgba(170, 18, 213, 0) 0%,
        rgba(97, 3, 171, 0.5) 100%
      );
    }
  }

  .img-w {
    width: 100%;
  }
  .btnImg {
    max-height: 120rpx;
  }

  .price {
    display: flex;
    margin: 48rpx 0 56rpx 0;
    padding: 0 32rpx;
    justify-content: space-around;
    .img-price {
      margin-left: 34rpx;
      &:nth-child(1) {
        margin: 0;
      }
    }
  }

  .scroll-view {
    // height: 1px;
    height: calc(100vh - 412rpx);
    flex-grow: 1;

    .box:last-child {
      padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
    }
  }

  .buy {
    position: fixed;
    bottom: calc(24rpx + constant(safe-area-inset-bottom));
    bottom: calc(24rpx + env(safe-area-inset-bottom));
    width: 100%;
  }

  &.vip-3 {
    background-image: url($img-base + 'vip/my-vip-high.png');
    background-color: #0c0116;

    .top {
      .gradient {
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(102, 83, 27, 0.5) 100%
        );
      }
    }

    .vip-icon {
      right: 28rpx;
      width: 292rpx;
      height: 278rpx;
    }
  }
}

view[hidden] {
  display: none !important;
}

// 详情页
.vip-detail {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #000960;

  .top {
    position: relative;
    height: 474rpx;
    // background-image: url($img-base + 'ecenter/vip-samll-top-bg.png');
    background-size: 100% 100%;

    .swiper {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 308rpx;

      .swiper-item {
        padding-top: 28rpx;
        // display: flex;
        // flex-direction: column;
        // justify-content: flex-end;
      }

      .card-wrap {
        position: relative;

        .icon-diamonds {
          position: absolute;
          bottom: 60rpx;
          right: -24rpx;
          width: 320rpx;
          height: 248rpx;
          pointer-events: none;
        }

        &.card-1 {
          .box {
            background-image: url($img-base + 'vip/card-bg-sm.png');
          }

          .icon-current {
            background-image: url($img-base + 'vip/curren-level-sm.png');
          }

          .icon-title {
            background-image: url($img-base + 'vip/level-title-sm.png');
          }

          .icon-diamonds {
            background-image: url($img-base + 'vip/diamonds-sm.png');
          }

          .icon-action {
            background-image: url($img-base + 'vip/update-sm.png');
          }
        }

        &.card-2 {
          .box {
            background-image: url($img-base + 'vip/card-bg-md.png');
          }

          .icon-current {
            background-image: url($img-base + 'vip/curren-level-md.png');
          }

          .icon-title {
            background-image: url($img-base + 'vip/level-title-md.png');
          }

          .icon-diamonds {
            right: -14rpx;
            background-image: url($img-base + 'vip/diamonds-md.png');
          }

          .icon-action {
            background-image: url($img-base + 'vip/update-md.png');
          }

          .label {
            color: #835ace;
          }
        }

        &.card-3 {
          .box {
            background-image: url($img-base + 'vip/card-bg-high.png');
          }

          .icon-current {
            background-image: url($img-base + 'vip/curren-level-high.png');
          }

          .icon-title {
            background-image: url($img-base + 'vip/level-title-high.png');
          }

          .icon-diamonds {
            bottom: 20rpx;
            right: -10rpx;
            background-image: url($img-base + 'vip/diamonds-h.png');
          }

          .icon-action {
            background-image: url($img-base + 'vip/update-high.png');
          }

          .label {
            color: #8c8c8b;
          }
        }

        &.not-current {
          .icon-title {
            position: absolute;
            top: 52rpx;
            left: 30rpx;
          }

          &.card-2 {
            .icon-action {
              background-image: url($img-base + 'vip/buy-md.png');
            }
          }

          &.card-3 {
            .icon-action {
              background-image: url($img-base + 'vip/buy-high.png');
            }
          }
        }
      }

      .box {
        position: relative;
        width: 604rpx;
        height: 278rpx;
        background-size: 100% 100%;

        .icon-current {
          margin: 2rpx 0 0 2rpx;
          width: 186rpx;
          height: 50rpx;
        }

        .icon-title {
          margin-bottom: 12rpx;
          width: 186rpx;
          height: 50rpx;
        }

        .icon-action {
          position: absolute;
          bottom: 28rpx;
          right: 40rpx;
          width: 164rpx;
          height: 60rpx;
        }

        .circle {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 338rpx;
          height: 274rpx;
          z-index: 1;
          pointer-events: none;
        }

        .user-info {
          display: flex;
          align-items: center;
          margin: 22rpx 0 32rpx 28rpx;
          height: 100rpx;

          .avatar-wrap {
            display: inline-block;
            flex-shrink: 0;
            margin-right: 14rpx;
            padding: 2rpx;
            background: linear-gradient(to bottom, #dbf1f5 100%, #caf0f9 100%);
            border-radius: 50%;
          }

          .avatar {
            width: 69rpx;
            height: 69rpx;
            border-radius: 50%;
          }

          .user-name {
            font-size: $uni-font-size-base;
            font-weight: bold;
            color: #ffffff;
          }
        }

        .label {
          position: absolute;
          bottom: 34rpx;
          left: 0;
          z-index: 2;
          margin-left: 36rpx;
          font-size: $uni-font-size-sm;
          color: #bdd4ff;
        }
      }
    }
  }

  .scroll-view {
    // height: 1px;
    height: calc(100vh - 474rpx);
    flex-grow: 1;

    .space {
      height: 86rpx;
    }

    .box:last-child {
      padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
    }
  }

  .img-w {
    width: 100%;
  }

  .buy {
    position: fixed;
    left: 0;
    right: 0;
    height: 150rpx;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }

  &.vip-1 {
    background-image: url($img-base + 'vip/my-vip-sm.png');
    background-size: 100%;
  }

  &.vip-2 {
    background-image: url($img-base + 'vip/my-vip-md.png');
    background-size: 100%;

    .user-name {
      color: #a315a9;
    }
  }

  &.vip-3 {
    background-image: url($img-base + 'vip/my-vip-high.png');
    background-size: 100%;

    .user-name {
      color: #ffea9f;
    }
  }
}
</style>
